<template>
  <div id="logintwo">
    <div class="avue-home" v-if="loading" style="z-index: 99;">
      <div class="avue-home__main">
        <img class="avue-home__loading" src="../img/login.jpeg" alt="loading">
        <div class="avue-home__title">
          努力加载中...
        </div>
      </div>
    </div>


    <el-card class="card">
      <div slot="header" class="clearfix">
        <span>登录</span>
      </div>
      <table>
        <tr>
          <td>用户名</td>
          <td>
            <el-input v-model="userName" placeholder="请输入用户名"></el-input>
          </td>
        </tr>
        <tr>
          <td>密码</td>
          <td>
            <el-input type="password" v-model="password" placeholder="请输入密码" @keydown.enter.native="doLogin"></el-input>
            <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
          </td>
        </tr>
        <tr>
          <!-- 占两行-->
          <td colspan="2">
            <span v-if="user" style="color:red">用户名密码错误</span>
            <!-- 点击事件的两种不同的写法v-on:click和 @click-->
            <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
            <el-button class="login" style="width: 300px" type="primary" @click="doLogin">登录</el-button>
            <el-button class="managerLogin" style="width: 300px" type="primary" @click="managerLogin">管理员登录</el-button>
            <el-button class="register" style="width: 300px" type="primary" @click="register">快速注册</el-button>
          </td>
        </tr>
      </table>

    </el-card>

  </div>
</template>

<script>
export default {

  data() {
    return {
      user: false,
      loading: true,
      passwordType: "password",
      userName: '',
      password: '',
      userId: '',
    }
  },
  mounted() {
    let that = this;
    setTimeout(function () {
      that.loading = false;
    }, 500);
  },

  methods: {
    doLogin() {
      let fd = new FormData()
      fd.append("userName", this.userName)
      fd.append("userPassword", this.password)
      this.$axios.post("/api/User/login", fd).then(
          res => {
            this.userId = res.data.userId

            if (res.data.userName != this.userName) {
              this.user = true
            } else {
              let userObj = res.data
              console.log(res.data.userName)

              if (null != userObj) {
                if (res.data.userStatus == 1) {
                  alert("账户已被冻结")
                } else {
                  let jsonUser = JSON.stringify(userObj)
                  sessionStorage.setItem("user", jsonUser)
                  this.$axios.get("/api/User/getUserData/" + this.userId).then(
                      r=>{

                          let jsonUser = JSON.stringify(r.data)
                          sessionStorage.setItem("userData", jsonUser)


                      }
                  )
                  this.$router.push("/shopIndex")
                }
              }
            }
          }
      )
    },
    managerLogin() {
      let fd1 = new FormData()
      fd1.append("managerName", this.userName)
      fd1.append("managerPassword", this.password)
      this.$axios.post("/api/Manager/loginManager", fd1).then(
          res => {
            console.log(res.data)
            if (res.data.managerName != this.userName) {
              this.user = true
            } else {
              this.$router.push("/showIsOnShaves")
            }
          }
      )
    },
    register() {
      this.$router.push("/register")
    }


  }
}
</script>

<style scoped>

#logintwo {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-image: url("../img/th.gif");
  background-repeat: no-repeat;
  background-position: center center;
  overflow: auto;
  position: fixed;
  line-height: 100%;
}

.logo {
  width: auto;
  height: 60px;
  display: flex;
  overflow: hidden;
  background-color: #1fb494;
}

.logo img {
  width: 32px;
  height: 32px;
  margin: 14px 10px 0 15px;
}

.logo .title {
  font-size: 16px;
  text-overflow: ellipsis;
  color: white;
  line-height: 61px;
}

.top-box {
  height: 60px;
  display: flex;
  background-color: #1fb494;
}

.top-box-i {
  width: 32px;
  height: 32px;
  font-size: 24px;
  margin: 16px 10px 0 15px;
  color: #FFFFFF;
}

.avue-home {
  /*background-color: #303133;*/
  background-color: rgba(39, 51, 59, 1.0);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.avue-home__main {
  user-select: none;
  width: 100%;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.avue-home__footer {
  width: 100%;
  flex-grow: 0;
  text-align: center;
  padding: 1em 0;
}

.avue-home__footer > a {
  font-size: 12px;
  color: #ABABAB;
  text-decoration: none;
}

.avue-home__loading {
  height: 32px;
  width: 32px;
  margin-bottom: 20px;
}

.avue-home__title {
  color: #FFF;
  font-size: 14px;
  margin-bottom: 10px;
}

.avue-home__sub-title {
  color: #ABABAB;
  font-size: 12px;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  display: none;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(39, 51, 59, 1.0);

}

::-webkit-scrollbar-track-piece {
  background-color: transparent;
}

a {
  color: #FFFFFF;
  text-decoration: none;
}

.name {
  line-height: 50px;
  font-size: 30px;
  font-weight: 700;
  color: #FFFFFF;
  margin-left: 10px;
}

.login-modal {
  position: relative;
  width: 420px;
  height: 450px;
  margin: 0 auto;
  top: 50%;
  margin-top: -225px;
  background-color: #FFFFFF;
  border-radius: 5px;
}

.title {
  height: 100px;
  line-height: 100px;
  font-weight: 650;
  text-align: center;
  font-size: 28px;
}

.login-form {
  margin: 20px 40px;
}

.card {
  width: 400px;
  height: 350px;
  margin: auto;
  margin-top: 300px;
}

.login {
  margin-top: 10px;
  margin-left: 30px;
  height: 40px;
}

.register {
  margin-top: 20px;
  margin-left: 30px;
  height: 40px;
}

.managerLogin {
  margin-top: 20px;
  margin-left: 30px;
  height: 40px;
}

</style>